<template>
  <MkDialog ref="dialogRef" @submit="submit" headerButton="submit">
    <MkForm :model="r.model" ref="mkFormRef">
      <MkSelectEnum label="分组" v-model="r.model.category" prop='category' enumType="PrintCategory" />
      <MkInput label="代码" v-model="r.model.code" prop='code' />
      <MkInput label="标题" v-model="r.model.title" prop='title' />
      <MkInput label="备注" v-model="r.model.remark" prop='remark' />
    </MkForm>
  </MkDialog>
</template>

<script lang="ts" setup>
// 问卷分类新增，编辑
import { reactive, ref } from 'vue';
// 接口
import { BasPrintApi } from '/@/api/bas/basPrint';
import { BasPrintAddInput } from '/@/api/bas/basPrint/dto';
// 工具
import { isNull, clog, showSuccess } from '/@/utils/index'

const emits = defineEmits(['onSuccess']);

const mkFormRef = ref();
const dialogRef = ref();

const r = reactive({
  model: {} as BasPrintAddInput,
});

// 打开弹窗
const open = async (row: any) => {
  dialogRef.value.show();
  mkFormRef.value?.resetFields();
  r.model = {} as BasPrintAddInput;
  r.model.sql1 = "Select 1"
  r.model.template = `<!-- 在mkprintweb.css中设置模板的通用样式 -->
<table border="1px">
  <thead>
    <tr>
      <th v-for="(value, key) in t1[0]" :key="key">{{ key }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(user, index) in t1" :key="index">
      <td v-for="(value, key) in user" :key="key">{{ value }}</td>
    </tr>
  </tbody>
</table>


<p  style="padding:10px">
{{ t2 }}
</p>    
`;
};

const submit = async () => {
  if (! await mkFormRef.value?.validate()) { return; }  // 表单校验失败 
  await BasPrintApi().add(r.model)
  emits("onSuccess")
  dialogRef.value.close();
}

// 导出对象
defineExpose({ open });
</script>
